<template>
    <div>
      <div class="banner" @click="handleImgsClick">
        <img class="banner-img" :src="bannerImg" />
        <div class="banner-info">
          <div class="banner-title">{{ this.sightName }}</div>
          <div class="banner-number">
            <span class="iconfont banner-icon">&#xec7f;</span>
            {{ this.bannerImgs.length}}
          </div>
        </div>
      </div>
      <!-- 这里用自定义组件是因为 后期数据 会过于庞大，所以需要独立出来，自定义组件，这些组件都分布在 common/gallary 里 -->
      <!-- 这里用 close 自定义事件而不能用 click 事件，能够监听事件 附加参数都会传给监听器回调   -->
      <fade-animation>
        <!-- common-gallary 作为一个插槽 插入到 FadeAnimation 里面   -->
        <gallary :imgs="bannerImgs" v-if="showGallary" @close="clickGallaryClick"></gallary>
      </fade-animation>
    </div>
  </template>
  
  <script>
  import Gallary from 'common/gallary/Gallary'
  import FadeAnimation from 'common/fade/FadeAnimation'
  export default {
    name: 'DetailBanner',
    data() {
      return {
        showGallary: false,
      }
    },
    props: {
      sightName: String,
      bannerImg: String,
      bannerImgs: Array
    },
    components: {
      Gallary,
      FadeAnimation
    },
    methods: {
      handleImgsClick: function () {
        this.showGallary = true
      },
      clickGallaryClick: function () {
        this.showGallary = false
      }
    }
  }
  </script>
  
  <style lang="less" scoped>
    .banner{
      // 防止页面图片抖动
      position: relative;
      overflow: hidden;
      height: 0;
      padding-bottom: 55%;
    }
      .banner-img{
        width: 100%;
      }
      .banner-info{
        display: flex;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        line-height: .6rem;
        color: #fff;
        background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8));
      }
        .banner-title{
          flex: 1;
          font-size: .32rem;
          padding: 0 .2rem;
        }
        .banner-number{
          padding: 0 .4rem;
          height: .32rem;
          margin-top: .14rem;
          line-height: .32rem;
          border-radius: .2rem;
          background: rgba(0, 0, 0, .5);
          font-size: .24rem;
        }
          .banner-icon{
            font-size: .24rem;
          }
  </style>
  